<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="信息年份" prop="infoYear">
                <el-input v-model="queryParams.infoYear" placeholder="请输入信息年份" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                    v-hasPermi="[' exam:score:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="[' exam:score:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="[' exam:score:export']">导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="Download" @click="handleImport"
                    v-hasPermi="[' exam:score:add']">导入</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="分数" align="center" prop="score" />
            <el-table-column label="目标省份" align="center" prop="targetArea" />
            <el-table-column label="专业" align="center" prop="professional" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="[' exam:score:edit']">修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                        v-hasPermi="[' exam:score:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改学校信息对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="scoreRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="招生分数" prop="score">
                    <el-input v-model="form.score" placeholder="请输入招生分数" />
                </el-form-item>
                <el-form-item label="目标省份" prop="targetArea">
                    <el-input v-model="form.targetArea" placeholder="请输入目标省份" />
                </el-form-item>
                <el-form-item label="专业" prop="professional">
                    <el-input v-model="form.professional" placeholder="请输入专业" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 用户导入对话框 -->
        <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
            <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?infoId=' + university.infoId" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

                <template #tip>
                    <div class="el-upload__tip text-center">
                        <div class="el-upload__tip">
                            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                        </div>
                        <span>仅允许导入xls、xlsx格式文件。</span>
                        <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                            @click="importTemplate">下载模板</el-link>
                    </div>
                </template>
            </el-upload>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { listScore, getScore, delScore, addScore, updateScore } from "@/api/exam/score";
import { getToken } from "@/utils/auth";

const { proxy } = getCurrentInstance();

const university = ref();
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const currentArea = ref();
const upload = reactive({
    open: false,
    title: "导入数据",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + "/exam/score/import"
})


const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        universityName: null,
        universityAreaId: null,
    },
    rules: {
        universityName: [
            { required: true, message: "学校名称不能为空", trigger: "blur" }
        ],
        universityAreaId: [
            { required: true, message: "所属地区id不能为空", trigger: "blur" }
        ],
    }
});

const { queryParams, form, rules } = toRefs(data);
const dataList = ref();


function getList() {
    getScore(localStorage.getItem("universInfoId")).then(res => {
        university.value = res.data;
        dataList.value = JSON.parse(res.data.extraInfo);
        console.log(university.value)
    })
}

// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

// 表单重置
function reset() {
    form.value = {
        universityId: null,
        universityName: null,
        universityAreaId: null,
        createBy: null,
        createTime: null
    };
    proxy.resetForm("universityRef");
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.universityId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}



/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    open.value = true;
    for (let index = 0; index < dataList.value.length; index++) {
        if (dataList.value[index].itemId == row.itemId) {
            dataList.value[index].score = form.value.score;
            dataList.value[index].targetArea = form.value.targetArea;
            dataList.value[index].professional = form.value.professional;
        }
    }
    const updateData = university.value;
    updateData.extraInfo = JSON.stringify(dataList.value);
    updateScore(updateData).then(res => {
        getList()
    });
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["universityRef"].validate(valid => {
        if (valid) {
            if (form.value.universityId != null) {
                updateUniversity(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                ElMessage({
                    type: "error",
                    message: "信息错误，请刷新"
                })
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    for (let index = 0; index < dataList.value.length; index++) {
        if (dataList.value[index].itemId == row.itemId) {
            dataList.value.splice(index, 1);
        }
    }
    const updateData = university.value;
    updateData.extraInfo = JSON.stringify(dataList.value);
    updateScore(updateData).then(res => {
        getList()
    });
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download('exam/university/export', {
        ...queryParams.value
    }, `university_${new Date().getTime()}.xlsx`)
}

function handleImport() {
    upload.title = "用户导入";
    upload.open = true;
}

function importTemplate() {
    proxy.download("exam/score/importTemplate", {
    }, `score_template_${new Date().getTime()}.xlsx`);
}

const handleFileUploadProgress = (event, file, fileList) => {
    upload.isUploading = true;
};

const handleFileSuccess = (response, file, fileList) => {
    upload.open = false;
    upload.isUploading = false;
    proxy.$refs["uploadRef"].handleRemove(file);
    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
    getList();
};

function submitFileForm() {
    proxy.$refs["uploadRef"].submit();
};

getList();
</script>

<style></style>